import React, { Component, createRef } from 'react';
import { Button, Input, Modal } from 'antd';
import MapContainer from '@/components/MapContainer';
import styles from './index.less';
import { defModalWidth } from '@/defaultSettings';

/**
 * 地址选择
 */
class LocationSelect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 地址关键字
      keyword: '',
      // 经度
      longitude: '',
      // 纬度
      latitude: '',
    };
    this.map = createRef();
  }

  render() {
    const { visible, onCancel } = this.props;
    return (
      <Modal
        visible={visible}
        title="地址选择"
        width={defModalWidth}
        // onOk={this.handleOk}
        onCancel={onCancel}
        footer={null}
      >
        <div>
          <div className={styles.header}>
            <Input
              onChange={this.handleKeywordChange}
              placeholder="请输入地址"
              style={{ width: '160px', marginRight: '8px' }}
              value={this.state.keyword}
              allowClear
            />
            <Button type="primary" style={{ marginRight: '8px' }} onClick={this.handleSearchClick}>
              查找地址
            </Button>
            <Input
              onChange={this.handleKeywordChange}
              placeholder="请输入经度"
              readOnly
              style={{ width: '160px', marginRight: '8px' }}
              value={this.state.longitude}
            />
            <Input
              onChange={this.handleKeywordChange}
              placeholder="请输入纬度"
              readOnly
              style={{ width: '160px', marginRight: '8px' }}
              value={this.state.latitude}
            />
            <Button type="primary" onClick={this.handleSubmitClick}>
              提交位置
            </Button>
          </div>
          <MapContainer ref={this.map} onLnglatChange={this.handleOnLnglatChange}></MapContainer>
        </div>
      </Modal>
    );
  }

  /**
   * 查询按钮被点击
   */
  handleSearchClick = () => {
    this.map.current.searchBy({ keyword: this.state.keyword });
  };

  handleKeywordChange = e => {
    const { value } = e.target;
    this.setState({ keyword: value });
  };

  handleOnLnglatChange = ({ lng, lat }) => {
    this.setState({
      longitude: lng,
      latitude: lat,
    });
  };

  /**
   * 提交按钮被点击
   */
  handleSubmitClick = () => {
    const { onSubmitClick } = this.props;
    if (onSubmitClick) {
      onSubmitClick({ lng: this.state.longitude, lat: this.state.latitude });
    }
  };
}

export default LocationSelect;
